<template>
	<view class="login2">
		<button class="upload" hover-class="none" open-type="chooseAvatar" @chooseavatar="chooseImg">
			<image :src="query.avatar?query.avatar:$IMG_URL('/static/user/notlog.png')" mode="" class="avater"></image>
			<image :src="$IMG_URL('/static/user/camera1.png')" mode="" class="camera"></image>
		</button>
		<view class="input_box">
			<view class="size">
				昵称
			</view>
			<input :value="query.nickname" class="nickNameInput input_cs" type="nickname" :border="false"
				input-align="right" placeholder="请填写您的昵称" @change="getNickname" />
		</view>
		<view class="btn" @click.stop="changeInfo">
			确定
		</view>
		<view class="size" @click.stop="goback">
			暂不完善
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		amend
	} from '@/api/user.js'
	export default {
		data() {
			return {
				query: {
					avatar: '',
					nickname: ''
				}
			}
		},
		methods: {
			getNickname(e) {
				console.log('e', e);
				this.query.nickname = e.detail.value
			},
			getamend(query) {
				amend(query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						const shopId = uni.getStorageSync('SHOPID')
						if (shopId && shopId !== '') {
							uni.$emit('SHOPID', uni.getStorageSync('SHOPID'))
						} else {
							console.log('SHOPID不存在')
						}
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon: false,
						})
					}
				})
			},
			goback() {
				const obj = {}
				this.getamend(obj)
			},
			// 修改资料
			changeInfo() {
				if (!this.query.avatar) {
					this.$refs.uToast.show({
						title: '请上传头像',
						type: 'error',
						icon: false,
					})
				} else if (!this.query.nickname) {
					this.$refs.uToast.show({
						title: '请上传名称',
						type: 'error',
						icon: false,
					})
				} else {
					this.getamend(this.query)
				}

			},
			// 选择图片
			chooseImg(e) {
				let that = this;
				if (e.detail.avatarUrl) {
					that.uploadImages(e.detail.avatarUrl, 'avatar');
				} else {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ["album", "camera"], //从相册选择
						success: function(res) {
							console.log(e);
							that.uploadImages(res.tempFilePaths[0], 'avatar');
						},
					});
				}
			},
			// 上传图片
			uploadImages(imgs, type) {
				let that = this;
				let token = uni.getStorageSync("token");
				let header = {};
				if (token) {
					header = {
						Authorization: token,
					};
				}
				uni.uploadFile({
					url: that.$API_URL('/share/upload'),
					filePath: imgs,
					name: "image",
					header: header,
					formData: {
						"form": type,
					},
					complete: ({
						data: res
					}) => {
						console.log(JSON.parse(res));
						const result = JSON.parse(res)
						if (result.code == 1) {
							that.$refs.uToast.show({
								title: "上传成功",
								type: 'success',
								icon: false,
							})
							that.query.avatar = result.data.image_url;
							console.log('that.query.avatar', that.query.avatar);
							this.$forceUpdate()
						} else {
							uni.showToast({
								title: "上传失败",
								icon: "none",
							});
						}
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nickNameInput {
		text-align: right;
	}

	button {
		margin: unset;
		padding: unset;
		background-color: transparent;
		/* 消除背景色 */
		border: none;
		/* 消除边框 */
	}

	button:after {
		border: unset;
	}

	.login2 {
		display: flex;
		flex-direction: column;
		align-items: center;

		.upload {
			margin-top: 196rpx;
			width: 204rpx;
			height: 204rpx;
			position: relative;

			.avater {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			.camera {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 58rpx;
				height: 58rpx;
			}
		}

		.input_box {
			margin-top: 64rpx;
			width: 654rpx;
			height: 104rpx;
			background: #f6f6f6;
			border-radius: 16rpx;
			padding: 0 32rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.size {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
			}

		}

		.btn {
			margin-top: 24rpx;
			width: 654rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.size {
			margin-top: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: right;
			color: #999999;
		}
	}
</style>